<template>
  <div class="container">
    <div id="map"></div>
    <el-button class="join-btn" @click="joinData" type="primary">join</el-button>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from 'mapbox-gl'
import {
  genetorGeoJosn,
  drawCanvas,
  genetorData
} from '../../src/utils/dataUtils'
export default {
  name: 'Vue2MapboxMapTemplate ',
  data () {
    return {}
  },

  mounted () {
    this.initMap()

    this.joinData()
  },

  methods: {
    initMap () {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A'
      // const style = {
      //   "version": 8,
      //   "name": "blank",
      //   "sources": {
      //     "openmaptiles": {
      //       "type": "vector",
      //       "url": ""
      //     }
      //   },
      //   "layers": [{
      //     "id": "background",
      //     "type": "background",
      //     "paint": {
      //       "background-color": "#1d1f20"
      //     }
      //   }]
      // };
      this.map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z', // style URL
        // style: style,
        center: [118.601604, 31.905137], // starting position [lng, lat]
        zoom: 10, // starting zoom
        projection: 'mercator'
      })

      this.jsonData = genetorGeoJosn(
        {
          ymax: 41.072443,
          ymin: 25.905137,
          xmax: 121.601604,
          xmin: 100.495696
        },
        2000
      )

      // load事件
      this.map.on('load', () => {
        drawCanvas().forEach((item) => {
          this.map.loadImage(item.imgUrl, (error, image) => {
            if (error) throw error
            !this.map.hasImage(item.id) && this.map.addImage(item.id, image)
          })
        })

        this.map.addSource('points', {
          type: 'geojson',
          data: this.jsonData
        })

        this.map.addLayer({
          id: 'points',
          type: 'symbol',
          source: 'points',
          layout: {
            // "icon-image": "star",
            'icon-image': [
              'match',
              ['get', 'type'], // 替换为您的属性字段名
              0,
              'rect', // 默认图标名称
              1,
              'tri', // 替换为范围1对应的图标名称
              2,
              'star', // 替换为范围2对应的图标名称
              'rect-red' // 默认图标名称
            ],
            'text-field': '{name}',
            'symbol-sort-key': ['get', 'type'] // 设置 symbol-sort-key
            // 'symbol-z-order': 'source'
          },
          // filter: ["has", "point_count"],
          paint: {
          }
        })

        this.joinData()
      })

      this.map.on('click', 'points', function (e) {
        // var coordinates = e.features[0].geometry.coordinates.slice();
        // var title = e.features[0].properties.id;
        const feature = e.features[0]
        const title = e.features[0].properties.type

        console.log(feature, title)
      })
    },
    joinData () {

    }
  }
}
</script>

<style>
.join-btn{
  position: absolute;
  top: 20px;
  left: 50px;
}
</style>
